<template>
	<view class="map_container">
		<map id="map" :latitude="spot.x" :markers="markers" :longitude="spot.y" :scale="11" :show-compass="true"></map>
		<view class="destination_desc">
			<view class="cardbox" :key="index">
				<view class="top">
					<view class="imagebox">
						<image :src="item.image" alt="" />
					</view>
					<view class="textbox">
						<text>{{item.name}}</text>
						<text>已报名：{{ item.enrollment}}人</text>
					</view>
					<up-button type="primary" text="规划路线" style="align-self: center;margin-left: auto;width: fit-content;"
					@click="jumpToMap"></up-button>
				</view>
				<view class="bottom">
					<view class="left">
						<up-icon name="map" color="#FF872E" size="20"></up-icon>
						<text style="color: #a6a6a6;">{{item.address}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';

	const spot = reactive({
		x: 0,
		y: 0
	})
	const markers = ref([{
			id: 0,
			latitude: 0, // 随机位置，实际应该使用真实数据
			longitude: 0,
			width: 32,
			height: 32,
			callout: {
				content: '我的位置',
				color: '#000000',
				fontSize: 14,
				borderRadius: 4,
				padding: 5,
				display: 'ALWAYS'
			}
		},
		{
			id: 1,
			latitude: 0, // 随机位置，实际应该使用真实数据
			longitude: 0,
			width: 32,
			height: 32,
			callout: {
				content: '目标位置',
				color: '#000000',
				fontSize: 14,
				borderRadius: 4,
				padding: 5,
				display: 'ALWAYS'
			}
		}
	])
	let item = ref({
		image: 'https://img.alicdn.com/img/i4/5499355032/O1CN01gIWhy11n2i2GZhFhk_!!4611686018427387800-0-saturn_solar.jpg',
		name: '全民马拉松',
		enrollment: '12',
		address: '北京市朝阳区'
	})

	function haveRole() {
		return wx.getSetting({
			success(res) {
				if (!res.authSetting['scope.address']) { //如果未授权
					//调用授权
					wx.authorize({
						scope: "scope.address",
						success() {
							getLocation()
						},
						fail() {
							wx.showModal({
								title: '提示',
								content: '您拒绝了地理位置授权，无法获取模糊地理位置信息。'
							});
						}
					})
				} else {
					getLocation()
				}
			}
		})
	}
	//更新地图坐标
	function getDestination() {
		//更新地图坐标
		markers.value[1].longitude = 112.90986000000001;
		markers.value[1].latitude = 28.24578
	}

	function getLocation() {
		wx.getFuzzyLocation({
			type: 'wgs84',
			success: (res) => {
				const {
					latitude,
					longitude
				} = res;
				//更新自己的位置
				markers.value[0].longitude = longitude;
				markers.value[0].latitude = latitude;

				//更新地图中心点 两点中间
				spot.y = (markers.value[0].longitude + markers.value[1].longitude) / 2;
				spot.x = (markers.value[0].latitude + markers.value[1].latitude) / 2;
			},
			fail: (res) => {
				console.log(res);
			}
		})
	}
	function jumpToMap() {
    // 目标位置的经纬度
    const latitude = markers.value[1].latitude; 
    const longitude = markers.value[1].longitude;
    wx.openLocation({
      latitude,
      longitude,
      scale: 18, // 缩放级别
      success: function () {
        console.log('成功跳转到地图应用');
      },
      fail: function (err) {
        console.error('跳转失败', err);
      }
    });
  }
	onMounted(() => {
		haveRole();
		getDestination();
	})
</script>

<style scoped lang="scss">
	.map_container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	#map {
		width: 100%;
		height: 100%;
	}

	.destination_desc {
		position: absolute;
		width: 100%;
		bottom: 0px;
		padding: 30rpx 10rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
	}

	.cardbox {
		margin: 10px 10px 0 10px;
		padding: 10px 10px 10px 10px;
		border-radius: 10px;
		background-color: white;

		.top {
			display: flex;
			border-bottom: #cacaca solid 1px;
			padding-bottom: 15px;
			gap: 10px;

			.imagebox {
				width: 80px;
				height: 80px;
				border-radius: 10px;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}

			}

			.textbox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text:nth-child(1) {
					font-weight: bold;
					font-size: 16px;
				}

				text:nth-child(2) {
					color: #989898;
					font-size: 14px;
				}
			}

		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 8px 0;

		.left {
			display: flex;
			gap: 5px;
		}

		text {
			font-size: 16px;
		}
	}
</style>